{include file="public/header" /}
<style>
    .layui-form-item .layui-inline {
        margin: 0;
    }
</style>
<body class="gray-bg">
<div class="wrapper wrapper-content animated fadeInRight">
    <div class="ibox float-e-margins">
        <div class="ibox-title">
            <h5>商品列表</h5>
        </div>
        <div class="ibox-content">
            <div class="example-wrap">
                <div class="example">
                    <!--搜索-->
                    <form class="layui-form layui-form-pane" action="">
                        <div class="layui-form-item" id="search">
                            <a class="layui-btn" href="{:url('product_add')}" style="float: left;margin-right: 10px;">发布商品</a>
                            <div class="layui-inline" style="float: left;">
                                <label class="layui-form-label">商品名称</label>
                                <div class="layui-input-inline">
                                    <input type="text" name="goods_name" class="layui-input" placeholder="需查询的商品名称">
                                </div>
                            </div>
                            <!--
                            <div class="layui-inline">
                                <label class="layui-form-label">商品状态</label>
                                <div class="layui-input-inline">
                                    <select name="status">
                                        <option value="">-&#45;&#45; 请选择 -&#45;&#45;</option>
                                        <option value="0">开启</option>
                                        <option value="1">关闭</option>
                                    </select>
                                </div>
                            </div>
                            -->
                            <div class="layui-inline" style="float: left;">
                                <label class="layui-form-label">状态</label>
                                <div class="layui-input-inline">
                                    <select name="closed">
                                        <option value="">--- 请选择 ---</option>
                                        <option value="0">上架</option>
                                        <option value="1">下架</option>
                                    </select>
                                </div>
                            </div>
                            <button class="layui-btn layui-btn-normal" lay-submit lsy-filter="search" type="button"
                                    style="float: left;">搜索
                            </button>
                        </div>
                    </form>
                    <!--列表-->
                    <table class="layui-table" lay-filter="goods" lay-size="lg"
                           lay-data="{height:'full-220',url:'product',method:'post',page:true,id:'goods'}">
                        <thead>
                        <tr>
                            <th lay-data="{title:'ID',field:'goods_id',width:60,align:'center',fixed:true,sort:true}"></th>
                            <th lay-data="{title:'商品名称',field:'goods_name',width:250}"></th>
                            <th lay-data="{title:'商品主图',field:'goods_photo',templet:'#goods_photo',width:130,align:'center'}"></th>
                            <th lay-data="{title:'市场价',field:'goods_market_price',width:100,align:'center',sort:true}"></th>
                            <th lay-data="{title:'本店售价',field:'goods_price',width:100,align:'center',sort:true}"></th>
                            <th lay-data="{title:'成本价',field:'goods_cost_price',width:100,align:'center',sort:true}"></th>
                            <th lay-data="{title:'重量(克)',field:'goods_weight',width:100,align:'center',sort:true}"></th>
                            <th lay-data="{title:'库存',field:'goods_stock',width:100,align:'center',sort:true}"></th>
                            <th lay-data="{title:'是否包邮',field:'is_free',templet:'#is_free',width:100,align:'center'}"></th>
                            <th lay-data="{title:'状态',field:'goods_status',templet:'#goods_status',width:100,align:'center',sort:true}"></th>
                            <th lay-data="{title:'最新',field:'is_new',templet:'#is_new',width:100,align:'center',sort:true}"></th>
                            <th lay-data="{title:'热门',field:'is_hot',templet:'#is_hot',width:100,align:'center',sort:true}"></th>
                            <th lay-data="{title:'商品描述',field:'goods_desc',width:300}"></th>
                            <th lay-data="{title:'创建时间',field:'create_time',width:180,align:'center',sort:true}"></th>
                            <th lay-data="{title:'更新时间',field:'update_time',width:180,align:'center',sort:true}"></th>
                            <th lay-data="{title:'操作',width:100,align:'center',toolbar:'#toolbar',fixed:'right'}"></th>
                        </tr>
                        </thead>
                    </table>
                    <script type="text/html" id="goods_photo">
                        <img src="/static/uploads/goods/{{d.goods_photo}}" alt="">
                    </script>
                    <!--是否包邮运费-->
                    <script type="text/html" id="is_free">
                        <input type="checkbox" name="is_free" value="{{d.goods_id}}" lay-skin="switch" lay-text="是|否"
                               lay-filter="is_free" {{d.is_free==1?'checked':''}}>
                    </script>
                    <!--状态-->
                    <script type="text/html" id="goods_status">
                        <input type="checkbox" name="goods_status" value="{{d.goods_id}}" lay-skin="switch"
                               lay-text="上架|下架"
                               lay-filter="goods_status" {{d.goods_status==1?'checked':''}}>
                    </script>
                    <!--最新-->
                    <script type="text/html" id="is_new">
                        <input type="checkbox" name="is_new" value="{{d.goods_id}}" lay-skin="switch"
                               lay-text="是|否"
                               lay-filter="is_new" {{d.is_new==1?'checked':''}}>
                    </script>
                    <!--热门-->
                    <script type="text/html" id="is_hot">
                        <input type="checkbox" name="is_hot" value="{{d.goods_id}}" lay-skin="switch"
                               lay-text="是|否"
                               lay-filter="is_hot" {{d.is_hot==1?'checked':''}}>
                    </script>
                    <!--工具-->
                    <script type="text/html" id="toolbar">
                        <div class="layui-btn-group">
                            <button class="layui-btn layui-btn-normal layui-btn-xs" lay-event="edit">编辑</button>
                            <button class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</button>
                        </div>
                    </script>
                </div>
            </div>
        </div>
    </div>
</div>
{include file="public/footer" /}
<script type="text/javascript">
    var form = layui.form, table = layui.table;
    /**
     * 监听工具条
     */
    table.on('tool(goods)', function (obj) {
        var data = obj.data; //获得当前行数据
        switch (obj.event) {
            case 'edit':

                break;
            case 'del':
                layer.confirm('您确定要删除该记录吗？', {title: false, closeBtn: false}, function (index) {
                    console.log(data);
                    obj.del();
                    layer.close(index);
                });
                break;
        }
    });
    /**
     * 监听包邮
     */
    form.on('switch(is_free)', function (obj) {
        $.post("{:url('product_status')}", {field: this.name, goods_id: this.value}, function (result) {
        });
    });

    /**
     * 监听状态
     */
    form.on('switch(goods_status)', function (obj) {
        $.post("{:url('product_status')}", {field: this.name, goods_id: this.value}, function (result) {
        });
    });

    /**
     * 监听最新
     */
    form.on('switch(is_new)', function (obj) {
        $.post("{:url('product_status')}", {field: this.name, goods_id: this.value}, function (result) {
        });
    });

    /**
     * 监听热门
     */
    form.on('switch(is_hot)', function (obj) {
        $.post("{:url('product_status')}", {field: this.name, goods_id: this.value}, function (result) {
        });
    });

    /**
     * 搜索
     */
    form.on('submit(search)', function (data) {
        var param = data.field;
        console.log(param);
        return false;
    });
</script>
</body>
</html>